<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description"content="{{site.description}}">
    <meta name="keywords" content="{{site.keywords}}"/>
    <meta property="og:title" content="{{site.title}}" />
    <meta property="og:description" content="{{site.description}}" />
     <title>{{site.title}}-{{site.name}}</title>
   {{include './common/css.html'}}
</head>
<body>
     {{include './common/header.html'}}

    <!-- 页面标题 -->
    <section class="bg-blue-400 text-white py-10 mt-16">
        <div class="container mx-auto px-4">
            <h1 class="text-4xl font-bold">联系我们</h1>
            <p class="mt-4 text-xl">期待与您建立长期稳定的合作关系</p>
        </div>
    </section>
   
     <!-- 联系信息和表单 -->
    <section class="py-16">
        <div class="container mx-auto px-4">
                <!-- 左侧联系信息 -->
                <h2 class="text-2xl font-bold mb-8">联系方式</h2>
                <div class="space-y-6">
                    <div class="flex items-start">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-map-marker-alt text-blue-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-semibold mb-2">公司地址</h3>
                            <p class="text-gray-600">{{frag.OfficeAddress}}</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-phone-alt text-blue-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-semibold mb-2">联系电话</h3>
                            <p class="text-gray-600">{{frag.CompanyTel}}</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-envelope text-blue-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-semibold mb-2">电子邮箱</h3>
                            <p class="text-gray-600">{{frag.CompanyEmail}}</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-clock text-blue-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-semibold mb-2">工作时间</h3>
                            <p class="text-gray-600">{{@ frag.CompanyWorkTime}}</p>
                        </div>
                    </div>
                </div>

        </div>
    </section>

     <!-- 地图位置 -->
    <section class="py-16 bg-gray-100">
        <div class="container mx-auto px-4">
            <h2 class="text-2xl font-bold mb-8 text-center">公司位置</h2>
            <div class="bg-white rounded-lg shadow-md overflow-hidden" id="container">
                <!-- 这里使用静态图片代替实际地图 -->
                <img src="{{static_url}}/img/company.jpg" 
                     alt="公司地址地图" 
                     class="w-full h-[400px] object-cover">
            </div>
            <div class="mt-8 text-center">
                <p class="text-gray-600">地铁：{{frag.subWay}}</p>
                <p class="text-gray-600">公交：{{frag.bus}}</p>
            </div>
        </div>
    </section>


    <!-- 页脚 -->
    {{include './common/footer.html'}}
    {{include './common/js.html'}}
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=9e8789d10de87f6393456aa3cc3ff312"></script>
<script type="text/javascript">
    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.290941, 39.820908],
        zoom: 16
    });

    var marker = new AMap.Marker({
        position: map.getCenter(),
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        anchor:'bottom-center',
        offset: new AMap.Pixel(0, 0)
    });

    marker.setMap(map);

    // 设置鼠标划过点标记显示的文字提示
    marker.setTitle('我是marker的title');

    // 设置label标签
    // label默认蓝框白底左上角显示，样式className为：amap-marker-label
    marker.setLabel({
        direction:'right',
        offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
        content: "<div class='info'>北京诺丰泰来科技有限公司</div>", //设置文本标注内容
    });
</script>
</body>
</html>